<!--评论区通用组件
    传入fid,对应模块-->
<script>
export default {
  name: "CommentComponent",
  // 传入数据
  props: {
    fid: null,
    module: ''
  },
  data() {
    return {
      commentCount: 0 ,  //评论数量
      commentContent: '',   //评论输入框内容
      commentList: [],   //评论数据
      user: JSON.parse(localStorage.getItem("xm-user")||'{}'),  //当前用户信息
    }
  },
  created() {
  this.loadComment();
  },
  methods: {
    //二级评论输入框显示函数
    handleShowReplyInput(item) {
      //改变显示数
      //item.showReplyInput = item.showReplyInput? false : true
      //强制更新
      this.$set(item,'showReplyInput',!item.showReplyInput)
    },
    //二级回复函数
    addReply(item) {
      this.$request.post('/comment/add',{content: item.replyContent, pid: item.id, rootId: item.rootId,fid:this.fid,module: this.module}).then(res => {
        if(res.code == '200'){
          this.$message.success('评论成功')
          item.replyContent = ''
          this.loadComment()  //重新加载最新数据
        }
      })
    },
    loadComment(){
      this.$request.get('/comment/selectAllForUser',{
        params: { fid: this.fid, module: this.module}
      }).then(res => {
        console.log(res.data)
        this.commentList = res.data || []
      })
      //加载评论数据
      this.$request.get('/comment/selectCount',{
        params: {fid: this.fid, module: this.module}
      }).then(res => {
        this.commentCount = res.data || 0
      })
    },
    addComment() {
      this.$request.post('/comment/add',{content: this.commentContent, fid: this.fid, module: this.module}).then(res => {
        if(res.code == '200'){
          this.$message.success('评论成功')
          this.commentContent = ''     //清空评论
          this.loadComment()  //重新加载最新数据
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    // 删除评论
    del(id) {   // 单个删除
      this.$confirm('您确定删除该评论吗？', '删除', {type: "warning"}).then(response => {
        this.$request.delete('/comment/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('OK了！！！  兄弟们')
            this.loadComment()
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
  }
  
}
</script>

<template>
  <div class="card" style="margin-right: 10px">
    <h2 style="margin-bottom: 20px;">评论 {{ commentCount }}</h2>
    <div>
      <el-input type="textarea" placeholder="请输入评论内容" :rows="3" maxlength=200 show-word-limit  v-model="commentContent"></el-input>
      <div style="text-align: right; margin-top: 5px">
        <el-button type="primary" @click="addComment">评论</el-button>
      </div>
    </div>
    <div>
    <div style="display: flex; grid-gap: 20px;margin-bottom: 20px" v-for="item in commentList" :key="item.id">
      <img :src="item.avatar" style="width: 50px;height: 50px; border-radius: 50%">
      <div style="flex: 1">
        <!--第一级评论-->
        <div style="margin-bottom: 10px">
          <div style="font-size: 13px;color:#333333;margin-bottom: 5px;">{{item.userName}}</div>
          <div style="color: #555555;margin-bottom: 5px;">{{item.content}}</div>
          <div style="color:#888888;font-size:13px;margin-bottom: 10px;">
            <span style="margin-right: 15px">{{ item.time}}</span>
            <!--根据showReplyInput绑定class: comment-active-->
            <span style="cursor:pointer" :class="{'comment-active' : item.showReplyInput}" @click="handleShowReplyInput(item)"><i class="el-icon-s-comment"></i>回复</span>
            <span style="margin-left: 15px" @click="del(item.id)" v-if="item.userId === user.id"><i class="el-icon-delete"></i>删除</span>
          </div>
        </div>
        <div v-if="item.showReplyInput">
          <el-input type="textarea" placeholder="请输入回复内容" :rows="3" maxlength=200 show-word-limit  v-model="item.replyContent"></el-input>
          <div style="text-align: right; margin-top: 5px">
            <el-button type="primary" @click="addReply(item)">回复</el-button>
          </div>
        </div>
        <!--评论回复 第二级评论-->
        <div style="display: flex;grid-gap: 20px;margin-bottom: 20px;" v-for="sub in item.children" :key="sub.id">
          <img :src="sub.avatar" style="width: 50px;height: 50px; border-radius: 50%">
          <div style="flex: 1" >
            <div style="font-size: 13px;color:#333333;margin-bottom: 5px;">{{sub.userName}} <span style="color: #009494;" v-if="sub.replyUser !== sub.userName">回复 {{ sub.replyUser }}</span></div>
            <div style="color: #555555;margin-bottom: 5px;">{{sub.content}}</div>
            <div style="color:#888888;font-size:13px;"><span style="margin-right: 15px;">{{ sub.time}}</span>
              <span style="cursor:pointer" :class="{'comment-active' : sub.showReplyInput}" @click="handleShowReplyInput(sub)"><i class="el-icon-s-comment"></i>回复</span>
              <span style="margin-left: 15px" @click="del(sub.id)" v-if="sub.userId === user.id"><i class="el-icon-delete"></i>删除</span>
            </div>
            <div v-if="sub.showReplyInput" style="margin-top: 10px">
              <el-input type="textarea" placeholder="请输入回复内容" :rows="3" maxlength=200 show-word-limit  v-model="sub.replyContent"></el-input>
              <div style="text-align: right; margin-top: 5px">
                <el-button type="primary" @click="addReply(sub)">回复</el-button>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
  </div>

</template>

<style scoped>

</style>